import { CSSProperties, memo, useCallback } from 'react';
import type { FC, PropsWithChildren } from 'react';
import { Button, InputNumber } from 'antd';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import './index.scss';

import CartStruct = API.CartStruct;

const NumberController: FC<
  PropsWithChildren<{ data: CartStruct; onChange: (value: number) => void }>
> = ({ data, onChange }) => {
  const onChangeHandler = useCallback(
    (value: number) => {
      if (0 < value && value <= data.goods?.stock!) {
        onChange(value);
      }
    },
    [onChange, data]
  );

  return (
    <InputNumber
      value={data.num}
      min={1}
      max={data.goods?.stock}
      onChange={onChangeHandler}
      className={'cus-input'}
    />
  );
};

export default memo(NumberController);
